import { Spin } from 'antd';
import { useEffect, useState } from 'react';

interface Jimu {
    id: number,
    name: string
}

function SignJimu({ jimuList }: { jimuList: Jimu[] }) {

    const clickJimu = (item: Jimu) => {
        console.log("点击的积木是：", item.name);
        alert("你点击了" + item.name);
    };
    
    return (
        <>
            {
                jimuList.map(item => {
                    return (
                        <div key={item.id} id={String(item.id)} className="item" onClick={() => clickJimu(item)}>
                            <span>{item.name}</span>
                        </div>
                    )
                })
            }
        </>
    );
}

function App() {
    const [isLoading, setIsLoading] = useState(true);
    const [jimuList, setJimuList] = useState<Jimu[]>([
        { id: 1, name: '1号积木' },
        { id: 2, name: '2号积木' },
        { id: 3, name: '3号积木' },
        { id: 4, name: '4号积木' },
        { id: 5, name: '5号积木' },
        { id: 6, name: '6号积木' },
        { id: 7, name: '7号积木' },
        { id: 8, name: '8号积木' },
        { id: 9, name: '9号积木' },
        { id: 10, name: '10号积木' },
        { id: 11, name: '11号积木' },
        { id: 12, name: '12号积木' },
    ]);

    useEffect(() => {
        
        const timer = setTimeout(() => {
            setIsLoading(false);
        }, 1000);
        return () => clearTimeout(timer);
    }, []);

    

    return (
        <>
            <button onClick={() =>{
                setJimuList([...jimuList, { id: jimuList.length + 1, name: '新积木'+(jimuList.length + 1) }]);
            }}>增加 积木</button>
            {isLoading ? <Spin fullscreen size='large' tip='Loading...'></Spin> : (
                <div className="container">
                    <SignJimu jimuList={jimuList}></SignJimu>
                </div>
            )}
        </>
    );
}

export default App;